/**
 * styling for DIVAS slider - skin dark focus
 * @author Federica Sibella - Michela Chiucini
 * @date 2014/08/01
 * @version 0.1
 * 
 1. RESET styles for Divas Slider
 2. SPINNER styles
 3. MANDATORY Divas Styles
 4. DEFAULT slider settings = SPECIFIC styles for demo
 5. GENERAL media queries
 */
/************************************************************************
 * 1. RESET styles for Divas Slider
 *************************************************************************/
 
.esc { position: relative;	width: 100%; height: 1px; clear: both; }
.clearfix:after {  content: "";  display: table;  clear: both; }

/************************************************************************
 * 2. SPINNER styles
 *************************************************************************/

@keyframes spin {
    to {
    	-webkit-transform: rotate(1turn);
    	-moz-transform: rotate(1turn);
    	-o-transform: rotate(1turn);
    	-ms-transform: rotate(1turn); 
    	transform: rotate(1turn); 
    }
}

@keyframes extra-spin {
    to { 
    	-webkit-transform: rotate(1.125turn);
    	-moz-transform: rotate(1.125turn);
    	-o-transform: rotate(1.125turn);
    	-ms-transform: rotate(1.125turn); 
    	transform: rotate(1.125turn);  
    }
}

.spin {
    font-size: 36px;
    text-align: center;
    text-indent: -999em;
}

.spin:before,
.spin:after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 0.2em;
    position: fixed;
    top: 5em;
    left: 50%;
    display: inline-block;
}

.spin:before {
    box-shadow:
        /* 1 */
        0 1em #eee,
        0 1.125em #eee,
        0 1.25em #eee,
        0 1.375em #eee,
        0 1.5em #eee,

        /* 3 */
        -1em 0 #aaa,
        -1.125em 0 #aaa,
        -1.25em 0 #aaa,
        -1.375em 0 #aaa,
        -1.5em 0 #aaa,

        /* 5 */
        0 -1em #666,
        0 -1.125em #666,
        0 -1.25em #666,
        0 -1.375em #666,
        0 -1.5em #666,

        /* 7 */
        1em 0 #222,
        1.125em 0 #222,
        1.25em 0 #222,
        1.375em 0 #222,
        1.5em 0 #222;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);    
    transform: rotate(45deg);
    -webkit-animation: extra-spin 1s infinite steps(8);
    -moz-animation: extra-spin 1s infinite steps(8);
    -o-animation: extra-spin 1s infinite steps(8);
    animation: extra-spin 1s infinite steps(8);
}

.spin:after {
    box-shadow:
        /* 2 */
        -1em 0 #ccc,
        -1.125em 0 #ccc,
        -1.25em 0 #ccc,
        -1.375em 0 #ccc,
        -1.5em 0 #ccc,

        /* 4 */
        0 -1em #888,
        0 -1.125em #888,
        0 -1.25em #888,
        0 -1.375em #888,
        0 -1.5em #888,

        /* 6 */
        1em 0 #444,
        1.125em 0 #444,
        1.25em 0 #444,
        1.375em 0 #444,
        1.5em 0 #444,

        /* 8 */
        0 1em #000,
        0 1.125em #000,
        0 1.25em #000,
        0 1.375em #000,
        0 1.5em #000;
    -webkit-animation: spin 1s infinite steps(8);
    -moz-animation: spin 1s infinite steps(8);
    -o-animation: spin 1s infinite steps(8);    
    animation: spin 1s infinite steps(8);
}
/*end of CSS spinner*/

#loader {
	position: fixed;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: rgba(255,255,255,1);
	display: block;
	text-align: center;
}

#loader > div {
	position: relative;
	margin-top: 10%;
}

/************************************************************************
 * 3. MANDATORY Divas styles
 *************************************************************************/
 
#slider_wrapper {
	overflow: hidden;
	margin-top:46px; float:left
}

.divas-slider {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.divas-slider-container {
	position: relative;
	margin: 0;
	padding: 0;
}

.divas-slider-container:after {
  content: "";
  display: table;
  clear: both;
}

.divas-slide {
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
	overflow: hidden;
}

.divas-slide img {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	outline: 0 none;
	-webkit-backface-visibility: hidden;
  	-moz-backface-visibility: hidden;
 	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

/************************************************************************
 * 4. DEFAULT slider settings
 *************************************************************************/

/*
 * divas slide transitions
 */
.divas-slide-transition-left {    
	 -webkit-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	 -moz-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	 -o-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	 transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

/*
 * divas navigation buttons
 */
.divas-navigation {
	clear: both;
	position: absolute;
	margin: 0px auto;
	height: 0;
	width: 100%;
	text-align: center;
	top: 47%;
	top: calc(50% - 33px);
}
.divas-has-bullets .divas-navigation {
    top: calc(50% - 61px);
}

.divas-navigation span {
	height: 56px;
	outline: 0 none; 
	position: absolute;
	width: 129px; 
	z-index: 9999;
	cursor: pointer;
	margin: 0;
	font-size: 3em;
	color: #fff;
}


.divas-navigation span:hover {
	color: #ffffff;
}

.divas-controls span.divas-start,
.divas-controls span.divas-stop {
	display: none;
}

.divas-navigation span.divas-prev {
	left: 7em;
	background: url("../images/cprev.png") no-repeat top center rgba(0, 0, 0, 0);
}

.divas-navigation span.divas-next {
	right: 7em;
	background: url("../images/cnext.png") no-repeat top center rgba(0, 0, 0, 0);
}

@media screen and (max-width: 40em) {
	.divas-navigation span.divas-prev,
	.divas-navigation span.divas-next{
		background-position:center center;
		-webkit-background-size: 75% auto;
		-moz-background-size: 75% auto;
		-o-background-size: 75% auto;
		background-size: 75% auto;
	}
	.divas-navigation span.divas-prev {
		left: 0.5em;
	}
	.divas-navigation span.divas-next {
		right: 0.5em;
	}
}	

/*
 * divas caption styling
 */
.divas-caption {
	position: absolute;
	bottom:10%;
	width:42%;
	background: #fff;
	border: none;
	padding: 30px 40px 40px;
	margin: 0 6em;
	box-sizing:border-box !important;
	box-shadow:0px 4px 8px #aaa
}


/*
 * divas caption transitions: left
 */
.divas-caption.divas-title-transition-left-start {
	left: -999px;
}

.divas-caption.divas-title-transition-left {
	-webkit-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	-moz-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	-o-transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	transition: left 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.divas-caption.divas-title-transition-left-stop {
	left: 0px;
}

.divas-caption h1 {
	font-weight: 900;
	font-size: 28px; color:#000;
	line-height: 50px;
}

.divas-caption p {
	font-size:14px; line-height:30px; color:#1d1d1d; margin-top:10px;
}
.divas-caption a{ font-size:18px; line-height:50px; color:#000; border:solid 1px #000; margin-top:30px; padding:0 30px; display:inline-block; text-transform:uppercase !important}
.divas-caption a:hover{ background:#054792; color:#fff}
.divas-caption a font{transform: scale(0.68,1) !important; float:left; font-weight:bold}

.divas-caption b{ width:70px; height:4px; background:#054792; position:absolute; left:-40px; top:65px}

/*
 * divas navigation bullets
 */
.divas-bullets {
	clear: both;
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
}

.divas-bullets ul {
	list-style: none;
}

.divas-bullet {
  	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 1.5em;
    display: inline-block;
    height: 16px;
    margin: 0 0.3em;
    text-indent: -9999px;
    width: 16px;
}

.divas-bullet-current {
   	background-color: rgba(0, 0, 0, 0.25);
}


 
 /************************************************************************
 * 5. GENERAL media queries
 *************************************************************************/
 
@media screen and (max-width: 1500px) {
.divas-caption{padding: 20px 30px;}
.divas-caption h1{ font-size:25px}
}	

@media screen and (max-width: 1300px) {
.divas-caption h1{ font-size:22px}
.divas-caption p{ line-height:24px}
.divas-caption a{ padding:0 20px; margin-top:15px}

}	

@media screen and (max-width: 1024px) {
.divas-caption p{ display:none}
.divas-caption h1{ font-size:18px}
.divas-caption a{ font-size:16px; line-height:40px}
.divas-navigation span.divas-prev{ left:3em}
.divas-navigation span.divas-next{ right:3em}

}

@media screen and (max-width: 768px) {
.divas-caption{ width:60%}
.divas-caption a{ font-size:14px}
}
@media screen and (max-width: 520px) {
.divas-navigation span.divas-prev{ left:0}
.divas-navigation span.divas-next{ right:0}

.divas-caption{ padding:10px; width:auto;margin:0 0 0 10%;}
.divas-caption h1{ display:none}
.divas-caption a{ margin-top:0}
.divas-caption b{ top:30%}
}